/* The Reset ---------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img, abbr { border: 0; }
caption, th { text-align: left; }
q:before, q:after { content: ''; }
a { text-decoration: none; }
ul, ol, li { list-style: none;}

body {
    background: #333;
    font-family:'Trebuchet MS';
}

/* Layout básico*/

#header {
    width: 100%;
    clear: both;
}

#principal {
    display: block;
    float: left;
    display: block;
    float: left;
    margin-left: 60px;
    margin-right:3%;
    margin-top: 20px;
    color:#ccccff;
    width: 70%;
}
#principal.error{
    color:red;
    text-align:left;
}
#principal.error h1{
    color:red;
}
#principal.galerias {
    color:silver;

}

#administracion {
    margin-top: 20px;
    color:#ccccff;
    margin-left:60px;
    font-family:'Trebuchet MS';
}
#administracion h1{
    margin-top: 20px;
    margin-bottom:10px;
    color:#ccccff;
    text-align:center;
    font-family:'Trebuchet MS';
}
#administracion tr{
    color:#ccccff;
}
#administracion a{
    font-weight: bold;
    color: white;
    font-family: Geneva,Arial,Helvetica,sans-serif;
}
#administracion.admon img{
    width:100px;
}
#administracion.admon img.x{
    width:20px;
}
#administracion table{
    width:70%;
    display:block;
    margin:0 auto 0 auto;
}

#principal table{
    width:70%;
    display:block;
    margin:0 auto 0 auto;
}
#principal h1{
    margin-bottom:10px;
    color:#ccccff;
    text-align:center;
}
#principal.login a{
    color:white;
}
#principal.post {
    display: block;
    float: left;
    margin-left: 60px;
    margin-right:3%;
    width: 70%;
}
#principal.nuevoComentario, #principal.fotoComentarios{
    color:silver;
    text-align:center;
    margin-top: 20px;

}
#principal.nuevoComentario h4{
    color:#cccccc;
    text-align:left;
    margin-top: 20px;
}
#principal.nuevoComentario table h4,p{
    color:silver;
    text-align:center;
    margin-top: 20px;

}
#about img{
    width:100px;
}
#div.centraTabla{
    text-align: center;
}

#div.centraTabla table {
    margin: 0 auto;
    text-align: left;
}
#lateral {
    background: #111;
    border: solid 1px #f5f5f5;
    border-right: 0px;
    display: block;
    float: right;
    margin-top: 20px;
    width: 20%;
}

/* Layout Cabecera */

#logowrapper {
    background: #111;
    border-bottom: solid 1px #282828;
    clear: both;
    height: 100px;
    width: 100%;
}

#navigation {
    background: #222;
    border-bottom: solid 1px #383838;
    height: 25px;
    width: 100%;
}

#login {
    color: #a8a8a8;
    text-indent:10px;
    float: right;
    width: 20%;
}

#links {
    color: silver;
    width: 70%;
    float: left;
    margin-left: 50px;
}

/* Apariencia cabecera */

#logowrapper a{
    background: url('../images/logo.png') no-repeat 60px 0px;
    border: 0px;
    display: block;
    height: 100px;
    overflow: hidden;
    text-indent: -5000px;
    width: 250px;
}

#navigation a, a:visited, a:hover, a:link{
    color: #a8a8a8;
}

#links a {
    background: #a8a8a8;
    border: 1px solid #282828;
    border-top: 0px;
    color: #111;
    display: block;
    float: left;
    margin-left: 10px;
    text-align: center;
    text-transform: lowercase;
    width: 125px;
}

#links a:hover {
    background: #111;
    color: #a8a8a8;
    text-transform: lowercase;
}

#login a {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #cccccc;
}

/* Principal */

#principal h3 {
    color: white;
    font: 18px/24px;
    margin:20px 0px 10px 0px
}

#principal p {
    color:silver;
    font: 12px/24px 'Verdana';
    margin: 0px 0px 10px 0px;
    text-align:justify;
}

#principal i {
    color: silver;
    font: 10px/12px 'Verdana';
}

#principal a{
    color: silver;
    display: block;
    margin: 10px 0px 0px 0px;
}
/* Aspecto de barra lateral */

#lateral h3 {
    display: block;
    background: #a8a8a8;
    color: #111;
    text-indent: 10px;
    width: 100%;
}

#lateral ul {
    padding: 10px;
}

#lateral li {
    margin: 10px 0px 10px 0px;
    list-style-type:square;
    list-style-position: inside;
}
